<template>
  <view 
    class="custom-button"
    :class="[
      `btn-${type}`,
      `btn-${size}`,
      { 'btn-disabled': disabled, 'btn-loading': loading }
    ]"
    @tap="handleClick"
  >
    <view v-if="loading" class="btn-loading-icon">
      <van-loading size="16" color="currentColor" />
    </view>
    <view v-else-if="icon" class="btn-icon">
      <van-icon :name="icon" :size="iconSize" />
    </view>
    
    <view v-if="$slots.default || text" class="btn-text">
      <slot>{{ text }}</slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 组件属性
interface Props {
  type?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default'
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
  icon?: string
  text?: string
}

const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  size: 'medium',
  disabled: false,
  loading: false,
  icon: '',
  text: ''
})

// 事件
const emit = defineEmits<{
  click: [event: Event]
}>()

// 计算属性
const iconSize = computed(() => {
  const sizeMap = {
    small: 14,
    medium: 16,
    large: 18
  }
  return sizeMap[props.size]
})

/**
 * 处理点击事件
 * @param event 点击事件
 */
const handleClick = (event: Event) => {
  if (props.disabled || props.loading) {
    return
  }
  emit('click', event)
}
</script>

<style lang="scss" scoped>
.custom-button {
  @apply inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
  
  // 尺寸样式
  &.btn-small {
    @apply px-3 py-2 text-sm;
    min-height: 32px;
  }
  
  &.btn-medium {
    @apply px-4 py-2.5 text-base;
    min-height: 40px;
  }
  
  &.btn-large {
    @apply px-6 py-3 text-lg;
    min-height: 48px;
  }
  
  // 类型样式
  &.btn-primary {
    @apply bg-primary-500 text-white;
    @apply hover:bg-primary-600 focus:ring-primary-500;
    @apply active:bg-primary-700;
  }
  
  &.btn-secondary {
    @apply bg-secondary-500 text-white;
    @apply hover:bg-secondary-600 focus:ring-secondary-500;
    @apply active:bg-secondary-700;
  }
  
  &.btn-success {
    @apply bg-green-500 text-white;
    @apply hover:bg-green-600 focus:ring-green-500;
    @apply active:bg-green-700;
  }
  
  &.btn-warning {
    @apply bg-yellow-500 text-white;
    @apply hover:bg-yellow-600 focus:ring-yellow-500;
    @apply active:bg-yellow-700;
  }
  
  &.btn-danger {
    @apply bg-red-500 text-white;
    @apply hover:bg-red-600 focus:ring-red-500;
    @apply active:bg-red-700;
  }
  
  &.btn-default {
    @apply bg-gray-100 text-gray-700 border border-gray-300;
    @apply hover:bg-gray-200 focus:ring-gray-500;
    @apply active:bg-gray-300;
  }
  
  // 禁用状态
  &.btn-disabled {
    @apply opacity-50 cursor-not-allowed;
    @apply hover:bg-current active:bg-current;
  }
  
  // 加载状态
  &.btn-loading {
    @apply cursor-wait;
  }
}

// 按钮内容布局
.btn-loading-icon,
.btn-icon {
  @apply mr-2;
}

.btn-text {
  @apply flex-1;
}

// 只有图标时移除文字间距
.custom-button:not(:has(.btn-text)) {
  .btn-icon {
    @apply mr-0;
  }
}

// 悬停效果
.custom-button:not(.btn-disabled):not(.btn-loading) {
  @apply transform transition-transform duration-150;
  
  &:hover {
    @apply scale-105;
  }
  
  &:active {
    @apply scale-95;
  }
}

// 阴影效果
.custom-button:not(.btn-disabled) {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  
  &:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
}
</style>
